<template>
	<view class="content">
		<view class="box" v-if="detail">
			<view class="tyx">特易学</view>
			<view class="copy-btn" @click="handleCopy">①点击 复制激活码</view>
			<view class="code">
				<image src="../../static/tool/code-bg.png" class="code-bg" mode="widthFix"></image>
				<view class="code-text">激活码</view>
				<view class="code-content">
					<view class="title">【{{detail.name}}】</view>
					<view class="num">{{detail.code}}</view>
					<view>{{detail.days}}</view>
				</view>				
			</view>
			<view class="instructions">
				<view @click="handleInstructions">使用说明</view>
				<u-icon name="arrow-right" color="#c7c7c7" size="14"></u-icon>
			</view>
			<view class="btn2" @click="handleToXcx">② 进入程序使用</view>
		</view>
		<!-- 打包资料下载 -->
		<view class="box">
			<view class="title">打包资料下载</view>
			<view class="gzh-box">
				<image src="../../static/tool/logo.jpg"></image>
				<view class="gzh-text">
					<view>关注公众号后，后台回复”资料“</view>
					<view class="gzh-tip">打包资料批量下载</view>
				</view>
				<view class="follow" @click="handleAttention">关注</view>
			</view>
		</view>
		<!-- 资料查阅下载 -->
		<view class="box other-xcx">
			<view class="ox-left">
				<view class="title" style="width: 200rpx;">资料查阅下载</view>
				<image src="../../static/tool/read-logo.jpg"></image>
			</view>
			<image src="../../static/tool/go-btn.png" class="go-btn" @click="handleIndex"></image>
		</view>
		<!-- 刷题/视频 -->
		<view class="box other-xcx">
			<view class="ox-left">
				<view class="title" style="width: 200rpx;">刷题/视频</view>
				<image src="../../static/tool/blue-logo.png"></image>
			</view>
			<image src="../../static/tool/go-btn.png" class="go-btn" @click="toSubject"></image>
		</view>
		<!-- 图文资料学习 -->
		<view class="box">
			<view class="title">图文资料学习</view>
			<view class="imageText">
				<image src="../../static/tool/imageText-1.jpg" class="imageText-1"></image>
				<image src="../../static/tool/imageText-2.jpg" class="imageText-2"></image>
				<image src="../../static/tool/down-btn.png" class="down-btn" @click="toImageText"></image>
			</view>
		</view>
		<!-- 正版书籍丨打印服务 -->
		<view class="box">
			<view class="title">正版书籍丨打印服务</view>
			<view class="print-box">
				<image :src="activeSystemData.books_service_image" :show-menu-by-longpress="true" mode="widthFix" style="width: 100%;"></image>
				<!-- <image src="../../static/tool/print-1.png" class="print-img" mode="widthFix"></image>
				<image src="../../static/tool/print-2.png" class="print-img" mode="widthFix"></image>
				<image src="../../static/tool/print-3.png" class="print-img" mode="widthFix"></image>
				<view class="print-info">
					<view class="print-text">
						<view>淘宝搜索“特易学”进店</view>
						<view>或者联系“小特”</view>
					</view>
					<image src="../../static/tool/print-4.png" class="print-4" mode="widthFix"></image>
				</view>
				<image src="../../static/tool/print-ewm.jpg" class="print-ewm" :show-menu-by-longpress="true"></image> -->
			</view>
		</view>
		<!-- 求职招聘 -->
		<view class="box">
			<view class="title">求职招聘</view>
			<view class="hire">
				<image src="../../static/tool/detail-btn.png" mode="widthFix" @click="toHire"></image>
				<image src="../../static/tool/hire.jpg" mode="widthFix"></image>
			</view>
		</view>
		<image :src="activeSystemData.qun_add_image" mode="widthFix" class="join-group" :show-menu-by-longpress="true"></image>
		<!-- 使用说明 -->
		<InstructionsModel ref="instructionsModel"/>
		<!-- 关注公众号 -->
		<AttentionModel ref="attentionModel"/>
	</view>
</template>

<script>
	import {receiveCode} from '@/api/activationCode.js'
	import InstructionsModel from './InstructionsModel.vue'
	import AttentionModel from './AttentionModel.vue'

	export default {
		components:{
			InstructionsModel,
			AttentionModel
		},
		data() {
			return {
				detail:null,
				optionsData:null
			}
		},
		computed: {
			token() {
				return this.$store.state.token
			},		
			activeSystemData() {
				return this.$store.state.activeSystemData
			},
		},
		watch: {
			token: {
				immediate: true,
				handler(val) {
					if(val&&this.optionsData){
						this.setReceiveCode(this.optionsData)
					}
				}
			}
		},
		onLoad(options) {
			console.log(options,'参数')
			this.detail=null
			if(options.code){
				this.optionsData=options
				uni.setNavigationBarTitle({
				      title: '领取激活码' 
				    })
					
				if(this.token){
					this.setReceiveCode(options)					
				}
			}else{
				this.optionsData=null
				uni.setNavigationBarTitle({
				      title: '特检学习工具包' 
				    })
			}
			
			
		},
		onShareAppMessage(res) {
			if(this.optionsData){
				return {
					title: `${this.detail.name} ${this.detail.days}激活码`,
					path: `/pages/toolKit/toolKit?projectId=${this.detail.active_project_id}&code=${this.detail.code}`,
					imageUrl: this.activeSystemData.qun_share_image
				};
			}else{
				return {
					title: `特检学习工具包`,
					path: `pages/toolKit/toolKit`,
					imageUrl: this.activeSystemData.special_inspection_image
				};
			}
			
		},
		methods: {
			handleIndex(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			handleToXcx(){
				uni.navigateToMiniProgram({
					appId: this.detail.app_id, // 填入目标小程序的 appId 
					path: this.detail.url, // 打开的页面路径，如果为空则打开首页
					extraData: {
						// 需要传递给目标小程序的数据
					},
					success(res) {
						console.log("成功===========", res)
						// 打开成功的回调
					},
					fail(err) {
						console.log("失败===========", err)
						// 打开失败的回调
					}
				});
			},
			async setReceiveCode(options){
				const {data}=await receiveCode({project_id:options.projectId,code:options.code})
				this.detail=data
			},
			// 招聘
			toHire(){
				uni.navigateToMiniProgram({
					appId: 'wxb54e3c2afbb12ade', // 填入目标小程序的 appId 
					path: 'pages/common/home/home', // 打开的页面路径，如果为空则打开首页
					extraData: {
						// 需要传递给目标小程序的数据
					},
					success(res) {
						console.log("成功===========", res)
						// 打开成功的回调
					},
					fail(err) {
						console.log("失败===========", err)
						// 打开失败的回调
					}
				});
			},
			//刷题视频跳转
			toSubject(){
				uni.navigateToMiniProgram({
					appId: 'wx947adcd3af1fed45', // 填入目标小程序的 appId 
					path: 'pages/index', // 打开的页面路径，如果为空则打开首页
					extraData: {
						// 需要传递给目标小程序的数据
					},
					success(res) {
						console.log("成功===========", res)
						// 打开成功的回调
					},
					fail(err) {
						console.log("失败===========", err)
						// 打开失败的回调
					}
				});
			},
			//跳转图文资料
			toImageText(){
				uni.navigateTo({
					url:'/pages/pdf/imageText'
				})
			},
			//关注公众号
			handleAttention(){
				this.$refs.attentionModel.setModel()
			},
			//使用说明
			handleInstructions(){
				this.$refs.instructionsModel.setModel()
			},
			// 复制
			handleCopy(){
				uni.setClipboardData({
					data:this.detail.code, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功'
						})
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 32rpx;
		box-sizing: border-box;
		background: #f0f0f0;
		min-height: 100vh;
		.title{
			font-size: 32rpx;
			font-weight: 800;
		}
		.join-group{
			width: 90%;
			margin:0 5% 32rpx 5%;
		}
		.hire{
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			image:first-child{
				width: 250rpx;
			}
			image:last-child{
				width: 350rpx;
			}
		}
		.print-box{
			display: flex;
			margin-top: 24rpx;
			align-items: center;
			justify-content: center;
			.print-info{
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 0 24rpx;
			}
			.print-text{
				font-size: 24rpx;
				text-align: center;
				line-height: 40rpx;
			}
			.print-4{
				width: 160rpx;
			}
			.print-ewm{
				width: 140rpx;
				height: 140rpx;
			}
			.print-img{
				width: 50rpx;
			}
		}
		.imageText{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 24rpx;
			.imageText-1{
				width:120rpx;
				height: 120rpx;
				margin-right: 16rpx;
			}
			.imageText-2{
				width: 160rpx;
				height: 90rpx;
				margin-right: 16rpx;
			}				
			.down-btn{
				width: 250rpx;
				height: 66rpx;
			}
		}
		.other-xcx{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.ox-left{
				display: flex;
				align-items: center;
				image{
					width: 65rpx;
					height: 65rpx;
					margin-left: 24rpx;
				}
			}
			.go-btn{
				width: 250rpx;
				height: 66rpx;
			}
		}
		.gzh-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 24rpx;
			box-sizing: border-box;
			box-shadow: 0 0 20rpx #efefef;
			border-radius: 16rpx;
			margin-top: 24rpx;
			margin-bottom: 16rpx;
			.follow{
				font-size: 26rpx;
				color: #9dbb90;
				border-radius: 8rpx;
				border: 1px solid  #9dbb90;
				padding: 6rpx 24rpx;
				margin-left: 24rpx;
				
			}
			image{
				width: 54rpx;
				height: 54rpx;
				margin-right: 24rpx;
			}
			.gzh-text{
				display: flex;
				flex-direction: column;
				flex: 1;
				font-size: 26rpx;
				align-items: center;
			}
			.gzh-tip{
				color: #767676;
				margin-top: 16rpx;
				font-size: 24rpx;
			}
		}
		.btn2{
			width: 450rpx;
			height: 70rpx;
			color: #fff;
			background-image: linear-gradient(to right, #d17e4e , #cc172f);
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 70rpx;
			margin: 32rpx auto;
		}
		.instructions{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 24rpx;
			margin-bottom: 16rpx;
			view{
				background: #f0e2cf;
				color: #a48864;
				font-size: 24rpx;
				margin-right: 12rpx;
				padding: 2rpx 12rpx;
				border-radius: 4rpx;
			}
		}
		.code{
			width: 100%;
			margin-top: 40rpx;
			position: relative;
			height: 221rpx;			
			.code-content{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
				.title{
					font-size: 32rpx;
					color: #646464;
				}
				.num{
					margin-top: 16rpx;
					font-size: 32rpx;
					color: #cc172f;
					margin-bottom:16rpx;
				}
			}
			.code-bg{
				width: 100%;
				height: 221rpx;
				position: absolute;
				left: 0;
				top: 0;
			}
			.code-text{
				position: absolute;
				left: 0;
				top: 3rpx;
				font-size: 26rpx;
				color: #fff;
				width: 120rpx;
				text-align: center;
			}
		}
		.copy-btn{
			margin-top: 40rpx;
			width: 100%;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			background-image: linear-gradient(to right, #d17e4e , #cc172f);
			border-radius: 90rpx;
		}
		.tyx{
			font-size: 32rpx;
			font-weight: 800;
		}
		.box{
			background: #fff;
			border-radius: 20rpx;
			padding: 24rpx;
			box-sizing: border-box;
			margin-bottom: 24rpx;
			
		}
	}
</style>